import styled from '@emotion/styled';
import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';

interface VideoCollectionProps {
	videoCollectionTime: any;
	setVideoCollectionTime: (videoCollectionTime: any) => void;
	errorMessage: string;
}

const VideoCollectionContainer = styled.div``;

const Label = styled.span`
	display: inline-block;
	font-size: 13px;
	color: #202020;
	margin-bottom: 12px;
`;

const TimeDiv = styled.div`
	width: 90px;
	height: 36px;
	background: #fffefe;
	border-radius: 4px;
	margin-right: 14px;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: ${(props: { videoCollectionTime: any; value: string }) => (props.videoCollectionTime === props.value ? '1px solid #252b48' : '1px solid #eaeaea')};
`;

const TimeContainer = styled.div`
	display: flex;
	flex-wrap: wrap;
`;

const ErrorMessage = styled.span`
	display: inline-block;
	font-size: 12px;
	color: #f8646a;
`;

const VideoCollection = (props: VideoCollectionProps) => {
	const { t } = useTranslation();
	const { errorMessage, videoCollectionTime, setVideoCollectionTime } = props;

	useEffect(() => {
		return () => {
			setVideoCollectionTime('');
		};
	}, []);

	const minute = t('minute');

	const timeData = [
		{ label: '30秒', value: '30000', id: '1' },
		{ label: `1${minute}`, value: '60000', id: '2' },
		{ label: `1.5${minute}`, value: '90000', id: '3' },
		{ label: `2${minute}`, value: '120000', id: '4' },
		{ label: `3${minute}`, value: '180000', id: '5' },
		{ label: `4${minute}`, value: '240000', id: '6' },
		{ label: `5${minute}`, value: '300000', id: '7' },
		{ label: `10${minute}`, value: '600000', id: '8' }
	];

	return (
		<VideoCollectionContainer>
			<Label>{t('select-collection-video-time')}</Label>
			<TimeContainer>
				{timeData.map(item => {
					return (
						<TimeDiv key={item.id} videoCollectionTime={videoCollectionTime} value={item.value} onClick={() => setVideoCollectionTime && setVideoCollectionTime(item.value)}>
							{item.label}
						</TimeDiv>
					);
				})}
			</TimeContainer>
			{errorMessage ? <ErrorMessage>{errorMessage}</ErrorMessage> : ''}
		</VideoCollectionContainer>
	);
};

export default VideoCollection;
